<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-if="false" v-model="listQuery.lineNumber" :placeholder="$t('equipment.lineNumber')" class="filter-item" style="width: 200px" @change="handleLineSelect">
        <el-option v-for="item in lineOptions" :key="item.lineNumber" :label="item.lineName" :value="item.lineNumber" />
      </el-select>
      <el-select v-model="listQuery.typeNo" :placeholder="$t('produce.typeName')" class="filter-item" style="width: 200px">
        <el-option v-for="type in typeOptions" :key="type.typeNo" :label="type.typeName" :value="type.typeNo" />
      </el-select>
      <el-select v-model="listQuery.stationNumber" :placeholder="$t('equipment.stationNumber')" class="filter-item" style="width: 200px">
        <el-option v-for="station in stationOptions" :key="station.stationNumber" :label="station.stationName" :value="station.stationNumber" />
      </el-select>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-refresh-left" @click="handleFilter">
        {{ $t('common.load') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-folder-add" @click="handleSave">
        {{ $t('common.save') }}
      </el-button>
    </div>
    <!-- 主界面数据 -->
    <el-col :lg="18">
      <json-editor
        ref="jsonEditor"
        v-model="listQuery.value"
        style="min-height:50%;width: 100%;"
      />
    </el-col>
    <el-col :lg="5">
      <div style="margin-left:20px">
        <p> {{ $t('common.example') }}</p>
        <span>[</span><br>
        <span style="margin-left:10px;">{</span><br>
        <span style="margin-left:20px;"> "name":"height",</span><br>
        <span style="margin-left:20px;"> "type":0,</span><br>
        <span style="margin-left:20px;"> "value":"1"</span><br>
        <span style="margin-left:10px;">},</span><br>
        <span style="margin-left:10px;">{</span><br>
        <span style="margin-left:20px;"> "name":"height",</span><br>
        <span style="margin-left:20px;"> "type":1,</span><br>
        <span style="margin-left:20px;"> "charLen":32,</span><br>
        <span style="margin-left:20px;"> "value":"1"</span><br>
        <span style="margin-left:10px;">}</span><br>
        <span>]</span><br>
        <p> {{ $t('produce.typeOptions') }}</p>
        <span>0 : real</span><br>
        <span>1 : string</span><br>
        <span>2 : int</span><br>
        <span>3 : bool</span><br>
        <span>4 : double</span><br>
        <span>5 : from EDC</span><br>
      </div>
    </el-col>
  </div>
</template>

<script>
import { getLineList, getStationListEx } from '@/api/equipment'
import { getTypeList, getTypeParas, saveTypeParas } from '@/api/produce'
import JsonEditor from '@/components/JsonEditor'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import i18n from '@/lang'

const jsonData = '[{"name":"height","type":0,"value":"1"},{"name":"height","type":0,"value":"1"}]'

export default {
  name: 'LineDefinition',
  components: {
    JsonEditor },
  directives: { waves },
  data() {
    return {
      editRight: true,
      tableKey: 0,
      list: [],
      lineOptions: [],
      typeOptions: [],
      stationOptions: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        state: 0,
        name: '',
        lineId: 0,
        lineNumber: this.$store.getters.lineNumber,
        lineName: '',
        typeNo: '',
        value: JSON.parse(jsonData),
        stationNumber: '',
        description: '',
        startTime: parseTime(Date.now(), '{y}-{m}-{d} 00:00:00'),
        endTime: '',
        sort: '+due_date'
      },
      showReviewer: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: i18n.t('common.edit'),
        create: i18n.t('common.creatNew'),
        company: '公司代号',
        manager: '人员信息'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        lineName: [{ required: true, message: i18n.t('msg.CAN_NOT_BE_NULL'), trigger: 'change' }],
        lineNo: [{ required: true, message: i18n.t('msg.CAN_NOT_BE_NULL'), trigger: 'change' }],
        priority: [{ required: true, message: i18n.t('msg.CAN_NOT_BE_NULL'), trigger: 'change' }]
      },
      downloadLoading: false,
      searchLoading: {
        company: false,
        manager: false
      },
      searchDialogStatus: '',
      searchDialogFormVisible: {
        company: false,
        manager: false
      }
    }
  },
  created() {
    this.getLineList()
    this.editRight = (this.$store.getters.roles === 'admin' || this.$store.getters.roles === 'administrator')
  },
  methods: {
    formatDateTime(date) {
      return date.substring(0, 10)
    },
    // 获取线体清单
    getLineList() {
      this.listLoading = true
      getLineList(this.listQuery).then(response => {
        this.lineOptions = response.data.lines
        this.stationOptions = []
        this.typeOptions = []
        this.listQuery.value = []
        this.handleLineSelect()
        this.listLoading = false
      })
    },
    handleLineSelect() {
      this.typeOptions = []
      this.stationOptions = []
      this.listQuery.value = []
      getTypeList(this.listQuery).then(response => {
        this.typeOptions = response.data.types
        if (this.typeOptions.length > 0) this.listQuery.typeNo = this.typeOptions[0].typeNo
      })
      getStationListEx(this.listQuery).then(response => {
        this.stationOptions = response.data.stations
        if (this.stationOptions.length > 0) this.listQuery.stationNumber = this.stationOptions[0].stationNumber
      })
    },
    // 点击搜索时获取清单
    handleFilter() {
      getTypeParas(this.listQuery).then(response => {
        this.listQuery.value = response.data.typeParas
      }).catch(() => { this.listQuery.value = JSON.parse(jsonData) })
    },
    // 检测json格式
    isJSON(str) {
      if (typeof str === 'string') {
        try {
          var obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false
        }
      } else if (typeof str === 'object' && str) {
        return true
      }
    },
    // 点击搜索时获取清单
    handleSave() {
      if (!this.isJSON(this.listQuery.value)) {
        this.$message({
          type: 'error',
          message: i18n.t('JSON格式错误')
        })
        return
      }
      saveTypeParas(this.listQuery).then(response => {
        this.$notify({
          itle: this.$i18n.t('common.tip'),
          message: i18n.t('msg.UPDATE_SUCCESS'),
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  height: 800px;
  background-color: white;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px x0;
    //margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
